<template>
    <div>
        <div class="login_top clearfix">
            <a href="index.html" class="login_logo"><img src="/static/images/logo02.png"></a>
        </div>

        <div class="login_form_bg" id='app'>
            <div class="login_form_wrap clearfix">
                <div class="login_banner fl"></div>
                <div class="slogan fl">商品美 · 种类多 · 欢迎光临</div>
                <div class="login_form fr">
                    <div class="login_title clearfix">
                        <a href="javascript:;" class="cur">账户登录</a>
                    </div>
                    <div class="form_con">
                        <div class="form_input cur">
                            <form id="login-form">
                                <input type="text" v-model="username" class="name_input"
                                    placeholder="请输入用户名或手机号">

                                <input type="password" v-model="password" class="pass_input"
                                    placeholder="请输入密码">

                                <div class="more_input clearfix">
                                    <input type="checkbox" v-model="remember">
                                    <label>记住登录</label>
                                    <a href="/find_password.html">忘记密码</a>
                                </div>
                                <input type="button" value="登 录" @click="login"  class="input_submit">
                            </form>
                        </div>
                    </div>
                    <div class="third_party">
                        <a class="qq_login">QQ</a>
                              <a href="https://api.weibo.com/oauth2/authorize?client_id=2682391216&redirect_uri=http://127.0.0.1:8080/weibo">微博登录</a>  
                        <a href="/register" class="register_btn">立即注册</a>
                    </div>

                </div>
            </div>
        </div>
    <food></food>        
    </div>
</template>

<script>
import axios from 'axios'
import food from './food'
export default {
    name:'login',
    components:{
        food
    },
    data() {
        return {
            username:'',
            password:'',
            remember:'',
            base_url:'http://127.0.0.1:8000'
        }
    },
    methods: {
        // 定义登录方法
        login(){
            let formdata = new FormData()
            // 把数据添加到表单中
            formdata.append('username',this.username)
            formdata.append('password',this.password)

            axios({
                url:this.base_url + '/app02/login/',
                method:'POST',
                data:formdata
            }).then(res=>{
                console.log(res.data)
                // 登陆成功，判断code值
                if(res.data.code==200){
                    // 存入sessionStorage
                    // sessionStorage 和 LocalStorage的区别
                    sessionStorage.setItem('token',res.data.token)
                    sessionStorage.setItem('username',res.data.username)
                    this.$router.push({
                        name:'shangpin'
                    })
                }
            })

        }
    },
    
}
</script>

<style>

</style>